import React from "react";
import { Menu, Card, Button, Pagination, Input } from "antd";
import type { MenuProps } from "antd/es/menu";
import "./index.less";

interface TaskCard {
  id: number;
  type: string;
  name: string;
  initiator: string;
  initTime: string;
  step: string;
  handler: string;
  status: string;
}

const Pg7: React.FC = () => {
  const menuItems: MenuProps["items"] = [
    { key: "welcome", label: "欢迎页" },
    { key: "pending", label: "待我处理" },
    { key: "initiated", label: "我发起" },
    { key: "processed", label: "我已处理" },
    { key: "archived-initiated", label: "我发起（已归档）" },
    { key: "archived-processed", label: "我已处理（已归档）" },
  ];

  const statusTags = ["流程中", "已结束", "强行终止"];

  const taskCards: TaskCard[] = [
    {
      id: 1,
      type: "精益立项",
      name: "新交付规划项目立项111",
      initiator: "伍玺/80293464",
      initTime: "2025-04-27 16:05:06",
      step: "组织级需求管理员审批",
      handler: "尹建奇/80302544",
      status: "流程中",
    },
  ];

  return (
    <div className="pg7-container" data-oid="fx95.-7">
      <Menu
        mode="horizontal"
        style={{ backgroundColor: "#fff", height: "100%" }}
        items={menuItems}
        className="pg7-menu"
        data-oid="7pgu.3q"
      />

      <div className="pg7-content" data-oid="ftm-k97">
        <div className="pg7-header" data-oid=".0v.3hr">
          <div className="pg7-status-tags" data-oid="af5f4u:">
            {statusTags.map((tag, index) => (
              <span key={index} className="pg7-status-tag" data-oid="3o3x93b">
                {tag}
              </span>
            ))}
          </div>
          <Input.Search
            placeholder="请输入专题特性"
            style={{ width: 200 }}
            data-oid="f07r7oy"
          />
        </div>

        <div className="pg7-cards" data-oid="4nt444y">
          {taskCards.map((card) => (
            <Card key={card.id} className="pg7-card" data-oid="hhhi28o">
              <div className="pg7-card-header" data-oid="uq6g:9w">
                <img src="blue-circle-icon.png" alt="图标" data-oid="zcni6o2" />
                <span data-oid="cta95:7">{card.type}</span>
              </div>
              <div className="pg7-card-content" data-oid="h1r2v3o">
                <p data-oid="bio7s_r">项目名称：{card.name}</p>
                <p data-oid="z5cvtj0">
                  流程发起人：{card.initiator} 发起时间：{card.initTime}
                </p>
                <p data-oid="x7fnhw6">
                  步骤名称：{card.step} 当前处理人：{card.handler}
                </p>
                <p data-oid="2vz5qax">流程状态：{card.status}</p>
              </div>
              <div className="pg7-card-actions" data-oid="gg-bvdb">
                <Button type="default" data-oid="303:3nd">
                  强行终止
                </Button>
                <Button type="default" data-oid="8mxqw0:">
                  详情
                </Button>
              </div>
            </Card>
          ))}
        </div>

        <div className="pg7-pagination" data-oid="i1fbbed">
          <span data-oid="75ld5u6">共 315 条</span>
          <Pagination
            defaultCurrent={1}
            total={315}
            pageSize={12}
            showSizeChanger={false}
            data-oid="_.7dbrg"
          />
        </div>
      </div>
    </div>
  );
};

export default Pg7;
